import shop from '../js/pages/shop.js'
// import bullet from '../images/bullet.png'
const context = canvas.getContext('2d');

export default class Main {


  constructor() {
    // 初始化tab页面
    this.tabHeight = 50;
    this.numberOfTabs = 5;
    this.selectedTabIndex = 0;

    this.shopPage = new shop(context);
    // 假设 icon 是已经加载好的图标图像
    var selectIcon = new Image();
    this.selectIcon = selectIcon;
    selectIcon.src = 'images/bullet.png'; // 替换为图标的实际路径
    var icon = new Image();
    this.icon = icon;
    icon.src = 'images/bg.jpg'; // 替换为图标的实际路径
    selectIcon.onload = () => {
      this.drawTabs();
      this.drawTabContent(this.selectedTabIndex);
      // drawTab(0, 'Tab 1'); // 示例：绘制第一个Tab，您可以根据需要调整
    };
    icon.onload = () => {
      this.drawTabs();
      this.drawTabContent(this.selectedTabIndex);
      // drawTab(0, 'Tab 1'); // 示例：绘制第一个Tab，您可以根据需要调整
    };
    
    this.setupTouchListeners();
  }

  setupTouchListeners() {
    wx.onTouchStart((e) => {
      var touch = e.touches[0];
      if (touch.pageY > canvas.height - this.tabHeight) {
        var clickedTabIndex = Math.floor(touch.pageX / (canvas.width / this.numberOfTabs));
        this.switchTab(clickedTabIndex);
      }
    });
  }

  drawTabs() {
    // 清除整个Canvas或者Tab区域
    context.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < 5; i++) {
      this.drawTab(i, 'Tab ' + (i + 1));
    }
  }

  drawTab(index, text) {
    // 根据index计算Tab位置
    const tabWidth = canvas.width / 5;
    const x = index * tabWidth;
    const y = canvas.height - this.tabHeight;

    // 绘制Tab背景
    // context.fillStyle = index === this.selectedTabIndex ? 'lightblue' : 'grey';
    // context.fillRect(x, y, tabWidth, this.tabHeight);
    // 首先绘制图标作为背景
    if (index === this.selectedTabIndex) {
      context.drawImage(this.selectIcon, x, y, tabWidth, this.tabHeight);
    } else {
      context.drawImage(this.icon, x, y, tabWidth, this.tabHeight);
    }
    
    // 绘制Tab文本
    context.fillStyle = 'white';
    context.font = '20px Arial';
    context.textAlign = 'center';
    context.fillText(text, x + tabWidth / 2, y + this.tabHeight / 2 + 10);
  }

  switchTab(index) {
    this.selectedTabIndex = index;
    // 清除或重绘当前Tab内容
    this.drawTabs();
    this.drawTabContent(index);
  }

  drawTabContent(index) {
    // 根据index绘制不同的内容
    switch (index) {
      case 0: {
        this.shopPage.draw();
        break;
      }

    }
  }



}
